<!--oem代理——摄像头列表-->
<template>
  <div class="ele-body">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="84px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card
        shadow="never"
        body-style="padding: 30px 22px;"
      >
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="所属代理">
              <el-select
                clearable
                class="ele-block"
                v-model="form.secondaryAgent"
                placeholder="请选择所属代理"
              >
                <el-option v-for="(i,j) in oemList" :key="j" :label="i.oemCode" :value="i.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="所属空间">
              <el-select
                v-model="form.spaceId"
                placeholder="请选择所属空间"
                class="ele-block"
                clearable
                @clear="see()"
              >
                <el-option v-for="(i,j) in spaceList" :key="j" :label="i.spaName" :value="i.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="设备状态">
              <el-select
                v-model="form.status"
                placeholder="请选择"
                class="ele-fluid"
                clearable
              >
                <!--// 设备在线状态: 1.on（在线） 2.off（离线） 3.failed（锁定） 4.new（未注册） -->
                <el-option label="在线中" :value="1" />
                <el-option label="已离线" :value="2" />
                <el-option label="已锁定" :value="3" />
                <el-option label="未注册" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="设备名称">
              <el-input
                v-model="form.displayName"
                placeholder="请输入设备名称"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="国标ID">
              <el-input
                v-model="form.subSerial"
                placeholder="请输入国标ID"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="m-top10">
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
            <!--class="colorBlue"-->
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-card class="m-top10 p-algin10"
             shadow="never">
      <table-list
        :oemList="oemList"
        ref="table"
        :spaceList="spaceList"
      />
    </el-card>
  </div>
</template>

<script>
  import tableList from './components/table-list.vue';
  import {addSpace, querySpace} from "@/api/lncomingManagement/spaceList";
  import {oemAgentQuery} from "@/api/oem";
  export default {
    name: "index",
    components: {tableList},
    data() {
      // 默认表单数据
      const defaultForm = {
      };
      return {
        isResetting:false,  // 判断从空间列表进入，是否点击重置，点击重置则不查询
        form: {},
        datetime:[],

        spaceForm: {
          oemId:this.$store.state.user.info.oemId,   //代理id
          limit:10,
          page:1,
        },
        spaceList:[], // 空间列表

        oemList:[] // 二级代理列表
      }
    },
    // 路由刷新
    activated() {
      this.isResetting=false
      // 从空间列表之——设备列表传参进入
      if(this.$route.query.spaceId){
        // this.see()
        setTimeout(()=>{
          this.see()
        },300)
      }

      this.spaceInit()
    },
    methods:{
      //查询空间列表
      spaceInit(){
        querySpace(this.spaceForm)
          .then((data) => {
            console.log("查询空间列表data",data)
            this.spaceList=data.list
          })
          .catch((e) => {
            this.$message.error(e.message);
          });


        // 查询所有代理
        oemAgentQuery(
          {
            parentId:this.$store.state.user.info.oemId,   //代理id
            oemType:2,
            limit:10,
            page:1,
            types:2
          }
        )
          .then((data) => {
            console.log("data===",data)
            this.oemList=data.list
          })
          .catch((e) => {
            this.$message.error(e);
          });


      },


      see(){
        // 选择了创建日期
        if(this.datetime){
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
        else{
          delete this.form.startTime
          delete this.form.endTime
        }


        if(this.$route.query.spaceId  && this.isResetting == false){
          this.form.spaceId = Number(this.$route.query.spaceId)
        }
        this.$nextTick(()=>{
          this.$refs['table'].reload(this.form)
        })
      },
      resetting(){
        this.isResetting=true
        this.form={...this.defaultForm}
        this.datetime=[]
        this.$nextTick(()=>{
          this.$refs['table'].reload(this.form)
        })
      },
    }
  }
</script>

<style scoped>
  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }
</style>

